import React, { useState,useEffect} from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input } from 'antd';
import { useHistory } from 'react-router-dom';
import backgroundImage from '../assets/images/1.jpg';
import axios from 'axios';
import { Carousel } from 'react-responsive-carousel';
import logo1 from '../assets/images/2.jpg';
import logo2 from '../assets/images/3.jpg';
import logo3 from '../assets/images/4.jpg';
import logo4 from '../assets/images/5.jpg';
import logo5 from '../assets/images/6.jpg';
import logo6 from '../assets/images/7.jpg';

const Login = () => {

  //const [formValid, setFormValid] = useState(false);
  const [uname,setUsername] = useState('');
  const [passwd,setPasswd] = useState('');
  const history = useHistory();

  //let token = '';
  //点击登录
  const onFinish = () => {
    axios.post('http://localhost:2023/auth/login', {
        username:uname,
        passwd:passwd,
    })
    .then((res)=>{
        console.log(res);
        //token = res.data.token
        history.push("/");
    }).catch(error => {
      console.error(error);
    });
  };

  const RegisterClick = () => {
    history.push("/register");
  };

  const SmsClick = () => {
    history.push("/sms");
  };

  const PasswordClick = () => {
    history.push("/password");
  };
  const userClick = () =>{
    history.push("/admin");
  }

  // 轮播图
  const [currentSlide, setCurrentSlide] = useState(0);
  // 增加或减少当前幻灯片的函数
  const nextSlide = () => {
    setCurrentSlide((prevSlide) => (prevSlide === totalSlides - 1 ? 0 : prevSlide + 1));
  };
  const prevSlide = () => {
    setCurrentSlide((prevSlide) => (prevSlide === 0 ? totalSlides - 1 : prevSlide - 1));
  };
  // 假设有6张图片
  const totalSlides = 6; 
  useEffect(() => {
    const interval = setInterval(() => {
      nextSlide();
    }, 2500);

    return () => {
      clearInterval(interval);
    };
  }, [currentSlide]);
  
  // const handleLogin = () => {
  //   // form.validateFields().then(() => {
  //   //   if (formValid) {
  //   //     console.log('Login successful');
  //   //     // 点击登录跳转首页
  //   //     history.push("/");
  //   //   }
  //   // });
  // };

  return (
  <div style={{ 
    display: 'flex', 
    justifyContent: 'center', 
    height: '97vh', 
    alignItems: 'center',
    backgroundImage: `url(${backgroundImage})`,//背景图
    backgroundSize: 'cover',
    }}
  >
    {/* 轮播图 */}
    <div 
    style={{ 
      position: 'relative', 
      maxWidth: '600px', 
      margin: '0 auto',
      marginLeft:250 
      }}
    >
      <Carousel
      selectedItem={currentSlide}
      onChange={(index) => setCurrentSlide(index)}
      showThumbs={false}
      autoPlay={false}
      infiniteLoop={true}
      showArrows={false}
      showStatus={false}
      showIndicators={false}
      >
        <img src={logo1} alt="Image 1" style={{ width: 650, height: 440, borderRadius: '10px 0 0 10px' }} />      
        <img src={logo2} alt="Image 2" style={{ width: 650, height: 440, borderRadius: '10px 0 0 10px' }} />
        <img src={logo3} alt="Image 3" style={{ width: 650, height: 440, borderRadius: '10px 0 0 10px' }} />        
        <img src={logo4} alt="Image 4" style={{ width: 650, height: 440, borderRadius: '10px 0 0 10px' }} />        
        <img src={logo5} alt="Image 5" style={{ width: 650, height: 440, borderRadius: '10px 0 0 10px' }} />        
        <img src={logo6} alt="Image 6" style={{ width: 650, height: 440, borderRadius: '10px 0 0 10px' }} />      
      </Carousel>
      <div style={{ position: 'absolute', top: '50%', transform: 'translateY(-50%)', left: -15 }}>
        <Button onClick={prevSlide} type="link" style={{color: '#55CA92',fontSize:30}}>{"<"}</Button>
      </div>
      <div style={{ position: 'absolute', top: '50%', transform: 'translateY(-50%)', right: -15}}>
        <Button onClick={nextSlide} type="link" style={{color: '#55CA92',fontSize:30}}>{">"}</Button>
      </div>
    </div>
    {/* 表单 */}
    <div 
    style={{ 
      border: '1px solid #BEBEBE',
      width: 300,
      padding: 20,
      borderRadius:'0 10px 10px 0',
      backgroundColor: 'rgba(255, 255, 255, 0)',
      boxShadow: '0 2px 4px rgba(0, 0, 0, 0.5)',
      marginRight:260,
      }}
    >
      {/* 登录标题 */}
      <h1 style={{ textAlign: 'center',}}>登录</h1>
      <Form
      name="normal_login"
      className="login-form"
      initialValues={{remember: true,}}
      onFinish={onFinish}
      >
        {/* 用户名 */}
        <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: '请输入用户名!',
          }
        ]}
        value={uname}
        onChange = {(e) => setUsername(e.target.value)}
        >
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <UserOutlined className="icon" style={{ color: '#55CA92' }} />
            <Input 
            placeholder="用户名" 
            className="input" 
            style={{ 
              width: 250, 
              marginLeft: 20,
              backgroundColor: 'rgba(255, 255, 255, 0.3)' 
            }} 
            />
          </div>
        </Form.Item>
        {/* 密码 */}
        <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码!',
              },
            ]}
            value={passwd}
            onChange = {(e) => setPasswd(e.target.value)}
        >
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <LockOutlined className="icon" style={{ color: '#55CA92' }} />
              <Input 
              type="password" 
              placeholder="密码" 
              className="input" 
              style={{ 
                width: 250, 
                marginLeft: 20,
                backgroundColor: 'rgba(255, 255, 255, 0.3)' 
              }} 
              />
            </div>
        </Form.Item>
        {/* 立即注册、短信验证登录 */}
        <Form.Item style={{ display: 'flex', justifyContent: 'space-between'}}>
          <a 
          href='' 
          style={{ 
            marginLeft: 10, 
            color: '#55CA92' 
          }} 
          onClick={RegisterClick}
          >
            立即注册
          </a>
          <a 
          href=''
          style={{ 
            marginLeft:120, 
            color:'#55CA92' 
            }} 
            onClick={SmsClick}
          >
            手机短信登录
          </a>
        </Form.Item>
        {/* 登录按钮 */}
        <Form.Item>
          <div 
          className="button-container" 
          style={{ 
            display: 'flex', 
            justifyContent: 'center' 
            }}
          >
            <Button 
            type="text" 
            htmlType="submit" 
            className="login-form-button" 
            style={{ 
              width: 200, 
              backgroundColor: '#55CA92', 
              color: 'white', 
              textAlign: 'center' 
              }}
            //onClick={handleLogin} 
            >
              登录
            </Button>
          </div>
        </Form.Item>
        <Form.Item style={{ textAlign:'center'}}>
          <a 
          href='' 
          style={{ 
            marginLeft: 15, 
            color: '#55CA92' 
          }} 
          onClick={PasswordClick}
          >
            已有账号，忘记密码？
          </a>
        </Form.Item>
        <Button type="link" block style={{color: '#55CA92'}} onClick={userClick}>
          管理员登录
        </Button>
      </Form>
      </div>
    </div>
  );
};

export default Login;